<template>
  <div class="skin_peeler">
    <el-color-picker v-model="colors.primary"></el-color-picker>
    <el-button @click="skinPeeler">换色</el-button>
    <el-date-picker
      class="search_wrapper"
      type="daterange"
      size="small"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </div>
</template>

<script>
import color from 'css-color-function'
export default {
  name: 'skinPeeler',
  data() {
    return {
      formula: {
        'shade-1': 'color(primary shade(10%))',
        'light-1': 'color(primary tint(10%))',
        'light-2': 'color(primary tint(20%))',
        'light-3': 'color(primary tint(30%))',
        'light-4': 'color(primary tint(40%))',
        'light-5': 'color(primary tint(50%))',
        'light-6': 'color(primary tint(60%))',
        'light-7': 'color(primary tint(70%))',
        'light-8': 'color(primary tint(80%))',
        'light-9': 'color(primary tint(90%))'
      },
      colors: {
        primary: '#409eff'
      },
      originalStyle: ''
    }
  },
  created() {
    this.getIndexStyle()
  },
  mounted() {
  },
  methods: {
    skinPeeler() {
      this.colors = Object.assign({}, this.colors, this.generateColors())
      this.writeNewStyle()
    },
    getIndexStyle () {
      let url = process.env.NODE_ENV === 'production' ? './static/css/index.css' : '/static/css/index.css'
      this.$axios({
        method: 'get',
        url: url
      }).then(res => {
        this.originalStyle = this.getStyleTemplate(res.data)
      })
    },
    getStyleTemplate (data) {
      const colorMap = {
        '#3a8ee6': 'shade-1',
        '#409eff': 'primary',
        '#53a8ff': 'light-1',
        '#66b1ff': 'light-2',
        '#79bbff': 'light-3',
        '#8cc5ff': 'light-4',
        '#a0cfff': 'light-5',
        '#b3d8ff': 'light-6',
        '#c6e2ff': 'light-7',
        '#d9ecff': 'light-8',
        '#ecf5ff': 'light-9'
      }
      Object.keys(colorMap).forEach(key => {
        const value = colorMap[key]
        data = data.replace(new RegExp(key, 'ig'), value)
      })
      return data
    },
    writeNewStyle () {
      let cssText = this.originalStyle
      Object.keys(this.colors).forEach(key => {
        cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + this.colors[key])
      })
      if (document.getElementById('changeColor') === null) {
        const style = document.createElement('style')
        style.id = 'changeColor'
        style.innerText = cssText
        document.head.appendChild(style)
      } else {
        document.getElementById('changeColor').innerText = cssText
      }
    },
    generateColors() {
      let colors = {}
      Object.keys(this.formula).forEach(key => {
        const value = this.formula[key].replace(/primary/g, this.colors.primary)
        colors[key] = color.convert(value)
      })
      return colors
    },
  }
}
</script>

<style scoped lang="less">

</style>
